/**
 * Created by yumeng on 2017/11/15.
 */

define([
  './themes/lang/' + window.YUFP_SYS_CONFIG.language + '/pages/example/template/exampleDraggable.js',
  './libs/vuedraggble/sortable.js',
  './libs/vuedraggble/vuedraggable.min.js'],
function (require, exports) {
  // page加载完成后调用ready方法
  exports.ready = function (hashCode, data, cite) {
    var vm = yufp.custom.vue({
      el: '#exampleDraggable',
      data: function () {
        var me = this;
        return {
          list: [
            { type: 'success', name: this.$t('exampleDraggable.cgan'), index: '1'},
            { type: 'warning', name: this.$t('exampleDraggable.jgan'), index: '2' },
            {type: 'danger', name: this.$t('exampleDraggable.wxan'), index: '3'},
            {type: 'info', name: this.$t('exampleDraggable.xxan'), index: '4'}
          ],
          listClone: [
            {type: 'primary', name: this.$t('exampleDraggable.zyan'), index: '5'}
          ],
          editable: true,
          editableClone: true,
          isDragging: false,
          delayedDragging: false
        };
      },
      methods: {
        onMove: function (evt) {
          var draggedContext = evt.draggedContext;// 拖动的元素
          var index = draggedContext.index;
          var futureIndex = draggedContext.futureIndex;
          var element = draggedContext.element;
          console.log(this.$t('exampleDraggable.tddysyxdxlh') + index);
          console.log(this.$t('exampleDraggable.tddysdqdxlh') + futureIndex);
          console.log('拖动的元素当前的试图模型(初始化数组中的对象)' + JSON.stringify(element));
          console.log('====================');
          relatedContext = evt.relatedContext;// 被交换的元素
          var index = relatedContext.index;
          var list = relatedContext.list;
          var element = relatedContext.element;
          var component = relatedContext.component;
          console.log(this.$t('exampleDraggable.btddysyxdxlh') + index);
          console.log(this.$t('exampleDraggable.ysdcshsjsz') + JSON.stringify(list));
          console.log('拖动的元素当前的试图模型(初始化数组中的对象)' + JSON.stringify(element));
          console.log(this.$t('exampleDraggable.zjdx') + component);
        }

      },
      computed: {
        dragOptions: function () {
          return {
            group: {name: 'description', pull: 'clone', put: false},
            disabled: !this.editable
          };
        },
        dragOptionsClone: function () {
          return {
            group: 'description',
            disabled: !this.editableClone
          };
        },
        listString: function () {
          return JSON.stringify(this.list, null, 2);
        },
        listStringClone: function () {
          return JSON.stringify(this.listClone, null, 2);
        }
      },
      watch: {
        isDragging: function (newValue) {
          if (newValue) {
            this.delayedDragging = true;
            return;
          }
          this.$nextTick(function () {
            this.delayedDragging = false;
          });
        }
      }
    });
  };

  // 消息处理
  exports.onmessage = function (type, message) {

  };

  // page销毁时触发destroy方法
  exports.destroy = function (id, cite) {

  };
});
